﻿@{
    ViewBag.Title = "欢迎页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
    <link href="~/css/other/console1.css" rel="stylesheet" />
    <style>
        .text_heade_left {
            text-align: left;
            margin-bottom: 10px;
        }

        .text_number_Traffic {
            font-size: 60px;
            font-weight: bold;
        }

        .text-number {
            font-size: 18px;
            font-weight: bold;
        }

        .pear-card2 .count {
            color: #2D8CF0;
            font-size: 30px;
            margin-top: 12px;
        }

        .pear-card2 .title {
            color: gray;
            font-size: 14px;
            margin-top: 14px;
        }

        .pear-card2 {
            width: 100%;
            height: 90px;
            background-color: #F8F8F8;
            display: inline-block;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 3px;
        }

            .pear-card:hover,
            .pear-card2:hover {
                box-shadow: 2px 0 8px 0 lightgray !important;
            }

        .paihang {
            margin: 0px 5px;
            background: #a5a5c1;
        }

        .fisrt-span {
            margin: 0px 5px;
            background: #FD8C84;
        }

        .second-span {
            margin: 0px 5px;
            background: #FFCC99;
        }

        .threen-span {
            margin: 0px 5px;
            background: #7FD75A;
        }
    </style>
}

<div class="layui-row layui-col-space10">

    <div class="layui-col-md9">

        <div class="layui-card">
            <div class="layui-card-header">文章数量统计</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10" id="channelnum">
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header text_heade_left">近30天文章浏览趋势图</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space5">
                    <div id="echarts-records" style="background-color:#ffffff;min-height:405px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">文章阅读排行榜</div>
            <div class="layui-card-body">
                <ul class="list">
                </ul>
            </div>
        </div>
    </div>

</div>

@section scripts{

    <script type="text/javascript">
        layui.use(['layer', 'echarts', 'element', 'topBar'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var element = layui.element;
            var echarts = layui.echarts;

            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

            function echart(res) {
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [{
                        type: 'category',
                        data: res.xAxis,
                        axisLine: {
                            lineStyle: {
                                color: "#999"
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        splitNumber: 4,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#939ab6'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#333"
                            },
                        },
                        nameTextStyle: {
                            color: "#999"
                        },
                        splitArea: {
                            show: false
                        }
                    }],

                    series: [{
                        name: '数量',
                        type: 'line',
                        data: res.yAxis,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: {
                                    type: 'linear',

                                    colorStops: [{
                                        offset: 0,
                                        color: '#1E9FFF' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#1E9FFF' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(72,216,191, 0.3)',
                                shadowBlur: 4,
                                shadowOffsetY: 4
                            }
                        },
                        smooth: true
                    }]
                };
                echartsRecords.setOption(option);
            }
            function Percentage(num, total) {
                if (num == 0 || total == 0) {
                    return 0;
                }
                return (Math.round(num / total * 10000) / 100.00);// 小数点后两位百分比
            }

            $.ajax({
                url: '/Admin/GetChannelNum',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    var data = res.data;
                    var _html = '';
                    for (var i = 0; i < data.length; i++) {
                        var h = '<div class="layui-col-md4 layui-col-sm4 layui-col-xs4">' +
                            '<div class="pear-card2">' +
                            '<div class="title">' + data[i].text + '</div>' +
                            '<div class="count pear-text">' + data[i].value + '</div>' +
                            '</div>' +
                            '</div>';
                        _html += h;
                    }
                    $('#channelnum').html(_html);
                }
            });

            $.ajax({
                url: '/Admin/GetBrokenLine',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    echart(res.data);

                }
            });

            $.ajax({
                url: '/Admin/GetRankList',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.data) {
                        var html = '';
                        $.each(res.data, function (k, v) {
                            if (k == 0) {
                                html += '<li class="list-item"><span class="layui-badge  fisrt-span">' + v.no + '</span>';
                            } else if (k == 1) {
                                html += '<li class="list-item"><span class="layui-badge  second-span">' + v.no + '</span>';
                            } else if (k == 2) {
                                html += '<li class="list-item"><span class="layui-badge  threen-span">' + v.no + '</span>';
                            } else {
                                html += '<li class="list-item"><span class="layui-badge paihang">' + v.no + '</span>';
                            }
                            html += '<span class="title">' + v.title + '</span><span class="footer">' + v.datetime + '</span></li>';
                        });
                        $('.list').empty();
                        $('.list').append(html);
                    }
                }
            });

            window.onresize = function () {
                echartsRecords.resize();
            }
        });
    </script>
}



